<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script type='text/javascript' src='js/vue.js'></script>
    <script src="./js/vue-router_3.0.2.js"></script>

    <style>
        header {
            background: purple;
            height: 100px;
        }

        footer {
            background-color: blue;
        }

        main {
            height: 500px;
            background-color: pink;
        }

        .left {
            width: 100px;
            background-color: red;
            float: left;
        }

        .right {
            float: left;
            background-color: green;
        }
    </style>
</head>

<body>
    <div id='app'>
        <router-view></router-view>
    </div>
    <script type='text/javascript'>
        var App = {
            template: `<div>
            <header>header
                <span @click='login'>登录</span>
            </header>
            <main>
                <div class='left'>
                    <ul>
                        <li><router-link to='/no1'>no1</router-link></li>
                        <li><router-link to='/no2'>no2</router-link></li>
                        <li><router-link to='/no3'>no3</router-link></li>
                        <li><router-link to='/no4'>no4</router-link></li>
                    </ul>
                </div>
                <div class='right' style='width:1200px;height:300px'>right
                    <router-view />
                </div>
            </main>
            <footer>footer</footer>
        </div>`,
            methods: {
                login() {
                    this.$router.push('/login')
                }
            }
        }

        var login={
            template:`<div>
                我是登录页面=========
            </div>`
        }

        var No1 = {
            template: `<div>
                <div class=''>No1</div>
                <table>
                    <thead>
                        <tr>
                            <td>id</td>
                            <td>姓名</td>
                            <td>年龄</td>
                            <td>操作</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="item in  userList " :key='item.id'>
                            <td>{{item.id}}</td>
                            <td>{{item.name}}</td>
                            <td>{{item.age}}</td>
                            <td @click='goDetail(item.id)'>详情</td>
                        </tr>
                    </tbody>
                
                </table>
        </div>`,
            methods: {
                goDetail(id) {
                    console.log(id, 2222);
                    this.$router.push({ name: '/detailInfo', params: { id: id } })

                }
            },
            data() {
                return {
                    userList: [
                        { id: 1, name: 'jack', age: 18 },
                        { id: 2, name: 'jack2', age: 17 },
                        { id: 3, name: 'jack3', age: 16 },
                        { id: 4, name: 'jack4', age: 15 },
                    ]
                }
            }
        }

        var No2 = {
            template: `<div>
                <div class=''>No2</div>
        </div>`
        }
        var No3 = {
            template: `<div>
                <div class=''>No3</div>
        </div>`
        }
        var No4 = {
            template: `<div>
                <div class=''>No4</div>
        </div>`
        }

        var detailInfo = {
            template: `<div>
            我是详情页====={{$route.params.id}}
            <button @click.prevent='goBack'>返回</button>
            </div>`,
            methods: {
                goBack() {
                    this.$router.go(-1)
                }
            }
        }


        const router = new VueRouter({
            routes: [
                {path: '/', redirect: '/no1', component: App, children: [
                        { path: '/no1', component: No1 },
                        { path: '/no2', component: No2 },
                        { path: '/no3', component: No3 },
                        { path: '/no4', component: No4 },
                        { path: '/detailInfo/:id', name: '/detailInfo', component: detailInfo }, 
                    ]
                },
                { path: '/login', component: login },
            ]
        })
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue'
            },
            router
        });
    </script>
</body>

</html>